<template>
  <div id="echarts4" style="height: 100%"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    typeList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts4()
  },
  created() {},
  methods: {
    showEcharts4() {
      let myChart = this.$echarts.init(document.getElementById('echarts4'))
      let array = JSON.parse(JSON.stringify(this.typeList))
      array.sort((a, b) => {
        return a.value - b.value
      }) //降序
      // console.log('1111', array)
      let data = array

      var ydata = []
      for (var i = 0; i < data.length; i++) {
        ydata.push(data[i].name)
      }
      var datalength = []
      for (var i = 0; i < data.length; i++) {
        datalength.push(0)
      }
      var databg = []
      for (var i = 0; i < data.length; i++) {
        databg.push(data[data.length - 1].value)
      }

      let option = {
        grid: {
          left: '1%',
          top: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true,
        },
        xAxis: [
          {
            show: false,
            type: 'log',
          },
        ],
        yAxis: [
          {
            axisTick: 'none',
            axisLine: 'none',
            offset: '10',
            // axisLabel: {
            //   textStyle: {
            //     color: '#fff',
            //     fontSize: '10',
            //   },
            // },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 10,
              },
              formatter: function (params) {
                let name = params.length > 6 ? params.substr(0, 6) + '...' : params
                return name
              },
            },
            data: ydata,
          },
          {
            axisTick: 'none',
            axisLine: 'none',
            axisLabel: {
              textStyle: {
                color: '#1890ff',
                fontSize: '16',
              },
            },
            data: data,
          },
          {
            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0,0)',
              },
            },
            data: [],
          },
        ],
        series: [
          {
            name: '条',
            type: 'bar',
            stack: '圆',
            yAxisIndex: 0,
            data: data,
            barWidth: 4,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#bae7ff', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#1890ff', // 100% 处的颜色
                    },
                  ],
                },
                barBorderRadius: 5,
              },
            },
            z: 2,
          },
          {
            name: '内圆',
            type: 'scatter',
            stack: '圆',
            yAxisIndex: 0,
            data: datalength,
            label: false,
            symbolSize: 6,
            itemStyle: {
              normal: {
                borderColor: '#409eff',
                borderWidth: 4,
                color: '#fff',
                opacity: 1,
              },
            },
            z: 2,
          },
          {
            name: '内圆框',
            type: 'scatter',
            stack: '圆',
            yAxisIndex: 0,
            data: datalength,
            label: false,
            symbolSize: 15,
            itemStyle: {
              normal: {
                borderColor: '#cce3ff',
                borderWidth: 2,
                color: '#e3f0ff',
                opacity: 1,
              },
            },
            z: 1,
          },
          {
            name: '白框',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: databg,
            barWidth: 6,
            itemStyle: {
              normal: {
                color: '#e4effe',
                barBorderRadius: 5,
              },
            },
            z: 0,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
